<template>
  <div id="map-container"></div>
</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import 'ol/ol.css'
import { Map, View } from 'ol'
import { useTianTileLayer, projection } from '@/hooks'
import { TiandiTileLayerConfigEnum } from '@/enum'
import { CENTER_BLHX_LONG_LAT } from '@/constant'

let map: Map

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map-container',
    layers: [ ...useTianTileLayer(TiandiTileLayerConfigEnum.SL) ],
    view: new View({
      center: CENTER_BLHX_LONG_LAT,
      projection: projection,
      zoom: 3,
      maxZoom: 17,
      minZoom: 1
    })
  })
}
</script>
<style scoped>

#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>